<template>
  <div class="bottom-bar">
    <mt-tabbar v-model="selected">
      <mt-tab-item id="Home">
        <img slot="icon" :src="img_home">
        首页
      </mt-tab-item>
      <mt-tab-item id="News">
        <img slot="icon" :src="img_news">
        资讯
      </mt-tab-item>
      <mt-tab-item id="Experts">
        <img slot="icon" :src="img_order">
        专家
      </mt-tab-item>
      <mt-tab-item id="User">
        <img slot="icon" :src="img_self">
        我的
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>

<script>
    export default {
        name: "index",
        data(){
          return {
            selected: 'Home'
          }
        },
      methods:{
        handler () {
          if (this.selected === 'Home') {
            this.$router.push({ name: 'Home' })
            this.img_home = require('../../../assets/home-selected.png')
          } else {
            this.img_home = require('../../../assets/home.png')
          }
          if (this.selected === 'Order') {
            this.$router.push({ name: 'Order' })
            this.img_order = require('../../../assets/order-selected.png')
          } else {
            this.img_order = require('../../../assets/order.png')
          }
          if (this.selected === 'User') {
            this.$router.push({ name: 'User' })
            this.img_self = require('../../../assets/self-selected.png')
          } else {
            this.img_self = require('../../../assets/self.png')
          }
          if (this.selected === 'News') {
            this.$router.push({ name: 'News' })
            this.img_news = require('../../../assets/news-selected.png')
          } else {
            this.img_news = require('../../../assets/news.png')
          }
          if (this.selected === 'Experts') {
            this.$router.push({ name: 'Experts' })
            this.img_news = require('../../../assets/news-selected.png')
          } else {
            this.img_news = require('../../../assets/news.png')
          }
        }
      },
      created() {
          this.handler();
      },
      watch: {
        'selected': function () {//select 是一个特定的监听方法名
          this.handler()
        },
        'mouseover': function () {//select 是一个特定的监听方法名
          console.log("11");
        }
        // $route: {
        //   // handler: function(val, oldVal){
        //   //   console.log(val);
        //   //   if(val.name!=this.selected){
        //   //     this.selected = val.name
        //   //     this.handler()
        //   //   }
        //   //
        //   // },
        //   // 深度观察监听
        //   deep: true
        // }
      },
    }
</script>

<style scoped>
  .bottom-bar{position: fixed;bottom:0;width: 100%}
</style>
